<template>
			
	<h4>
		课程管理 
		<el-button type="text" @click="this.dialogFormVisible = true">添加</el-button> 
		<el-input style="width: 140px;" type="text" @change="search" v-model="name" placeholder="请输入搜索内容" />
	</h4>

	<el-table :data="tableData">
		<el-table-column prop="name" label="课程名称" width="120"> </el-table-column>
		<el-table-column prop="pricetype" label="收费模式" width="120"> </el-table-column>
		<el-table-column prop="price" label="单价" width="120"> </el-table-column>
		<el-table-column prop="mode" label="上课模式" width="120"> </el-table-column>
		<el-table-column label="操作"> 
			<template v-slot:default="scope">
				<el-button type="text" @click="delInfo(scope.row.id)">删除</el-button>
				<el-button type="text" @click="updInfo(scope.row)">修改</el-button>
			</template>
		</el-table-column>
	</el-table>
	
	<!-- 分页 start -->
	<el-pagination @size-change="pageSize" @current-change="page"
		:current-page="publicForm.page" :page-sizes="[1, 5, 10]" :page-size="publicForm.psize"
		layout="total, sizes, prev, pager, next, jumper" :total="publicForm.counts">
	</el-pagination>
	<!-- 分页 end -->
		
	<!-- 添加 dialog -->
	<el-dialog title="增加课程" width="60%" v-model="dialogFormVisible" @close="this.$refs.resetFields1.resetFields()">
		<el-form :model="form" :rules="resetFields1" ref="resetFields1" label-width="70px">
			<el-form-item label="课程名称:" :label-width="formLabelWidth" prop="name"> <el-input v-model="form.name" autocomplete="off"></el-input> </el-form-item>
			<el-form-item label="收费模式:" :label-width="formLabelWidth">
				<div>
					<el-radio-group v-model="form.pricetype">
						<el-radio label="按课时收费"></el-radio>
						<el-radio label="按期收费"></el-radio>
					</el-radio-group>
				</div>
			</el-form-item>
			<el-form-item label="单价：" :label-width="formLabelWidth" prop="price"> <el-input v-model="form.price" autocomplete="off"></el-input>元/课时 </el-form-item>
			<el-form-item label="上课模式:" :label-width="formLabelWidth">
				<el-radio-group v-model="form.mode">
					<el-radio label="一对一"></el-radio>
					<el-radio label="集体"></el-radio>
				</el-radio-group>
			</el-form-item>
			<div slot="footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="add">确 定</el-button>
			</div>
		</el-form>
	</el-dialog>

	<!-- 修改 dialog -->
	<el-dialog title="增加课程" width="60%" v-model="dialogFormVisible2" @close="this.$refs.resetFields1.resetFields()">
		<el-form :model="form" :rules="resetFields1" ref="resetFields1" label-width="70px">
			<el-form-item label="课程名称:" :label-width="formLabelWidth" prop="name">
				<el-input v-model="form.name" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="收费模式:" :label-width="formLabelWidth">
				<div>
					<el-radio-group v-model="form.pricetype">
						<el-radio label="按课时收费"></el-radio>
						<el-radio label="按期收费"></el-radio>
					</el-radio-group>
				</div>
			</el-form-item>
			<el-form-item label="单价：" :label-width="formLabelWidth" prop="price">
				<el-input v-model="form.price" autocomplete="off"></el-input>元/课时
			</el-form-item>
			<el-form-item label="上课模式:" :label-width="formLabelWidth">
				<el-radio-group v-model="form.mode">
					<el-radio label="一对一"></el-radio>
					<el-radio label="集体"></el-radio>
				</el-radio-group>
			</el-form-item>
			<div slot="footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="add">确 定</el-button>
			</div>
		</el-form>
	</el-dialog>
	
</template>

<script>
	export default {
		data() {
			return {
				// 获取用户列表参数
				publicForm: {
					counts: 0,
					"page": 1,
					"psize": 5,
				},
				gridData: [],
				tableData: [],
				name: '',

				//  添加表单
				form: {
					name: "",
					pricetype: "",
					price: "",
					mode: "",
				},

				// 添加表单的验证规则对象
				dialogFormVisible: false,
				dialogFormVisible2: false,
				resetFields1: {
					name: [
						{required: true,message: '请填写班级名称',trigger: 'blur'},
						{min: 2,max: 10,message: '长度在 3 到 5 个字符',trigger: 'blur'}
					],
					price: [
						{required: true,message: '单价不能为空',trigger: 'blur'},
					]
				},
				
			}
		},
		created() {
			this.getList()
		},
		methods: {
			getList() {
				/**
				 * 列表展示
				 */
				this.axios.get('http://www.eshareedu.cn/edusystems/api/courses/list', {params: this.publicForm}).then((res) => {
					if (res.data.errCode == "10000") {
						this.publicForm.counts = res.data.data.counts
						this.tableData = res.data.data.list
					}
				})
			},
			
			
			async delInfo(id) {
				/**
				 * 删除
				 */
				let self = this
				const re = await this.$confirm('此操作将永久删除此条数据, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).catch(err => err)
				if (re == 'confirm') {
					const {data: ress} = await self.$http.get('http://www.eshareedu.cn/edusystems/api/courses/delete?id=' + id)
					if (ress.errCode != '10000') return this.$message.error('删除用户失败！')
					
					this.$message.success('删除用户成功')
					this.getList()
				}
			},


			updInfo(scope) {
				/**
				 * 修改
				 */
				for(var i in this.form)
					this.form[i] = scope[i]
				
				this.form.id = scope.id
				this.dialogFormVisible2 = true
				this.getList()
			},


			pageSize(newSize) {
				/**
				 * 分页 展示几条
				 */
				console.log('展示',newSize,'条')
				this.publicForm.psize = newSize
				this.getList()
			},
			

			page(newPage) {
				/**
				 * 分页 页码
				 */
				console.log('第'+newPage+'页')
				this.publicForm.page = newPage
				this.getList()
			},
			
			
			async add() {
				/**
				 * 点击按钮添加新课程
				 */
				let self = this
				var info = false
				this.$refs.resetFields1.validate(valid => {info = valid})
				if(!info) return this.$message.error('验证不通过')

				const { data: res } = await self.$http.post('http://www.eshareedu.cn/edusystems/api/courses/add', self.form);
				if (res.errCode != 10000) return this.$message.error('添加失败')
				
				this.dialogFormVisible = false,
				this.dialogFormVisible2 = false,
				this.getList()
				this.$message.success('课程添加成功')
			},


			search() {
				/**
				 *  搜索
				 */
				var selt = this
				this.axios.get('http://www.eshareedu.cn/edusystems/api/courses/list?name=' + this.name).then(function(res) {
					selt.tableData = res.data.data.list
				})
			},
			
			
		}
	}
</script>
